<template>
  <div class="industry" ref="dom">
    <div style="height: 100%;" ref="chart"></div>
    <div class="top" v-if="list.length" ref="text">
      <div class="item">用人单位所在行业TOP10</div>
      <div class="item" v-for="(val, key) in list" :key="key" :title="val.name + ' ' + val.cnt">
        <span class="label">{{val.name}}</span>
        <span class="text">{{val.cnt}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import {mapGetters} from 'vuex'
import {AutoHighLight} from '../../common/js/utils'
import $ from 'jquery'
import {INTERVAL} from '../../common/js/config'

export default {
  name: 'industry',
  computed: {
    ...mapGetters([
      'currentTime'
    ])
  },
  data() {
    return {
      options: {
        title: {
          text: '用人单位所在行业分布图',
          left: 'center',
          top: '5',
          textStyle: {
            color: '#8cd1f7',
            fontSize: '18',
            align: 'center'
          }
        },
        color: ['#28acb5'],
        angleAxis: {
          type: 'category',
          data: [],
          z: 10,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: 'white',
            interval: 0
          }
        },
        tooltip: {
          trigger: 'item',
          formatter(params) {
            return `${params.name}<br>${params.value}家`
          }
        },
        radiusAxis: {
          nameTextStyle: {
            color: 'white'
          },
          axisTick: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          }
        },
        polar: {
          center: ['40%', '55%'],
          radius: '65%'
        },
        textStyle: {
          color: '#fff'
        },
        series: [{
          type: 'bar',
          data: [],
          center: ['40%', '55%'],
          coordinateSystem: 'polar',
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderColor: 'polar'
            }
          },
          name: 'A',
          stack: 'a',
          barMinHeight: '15'
        }],
        legend: {
          show: false,
          data: ['A', 'B', 'C']
        }
      },
      options2: {
        title: {
          text: 'WORLD COFFEE RESEARCH SENSORY LEXICON',
          textStyle: {
            fontSize: 14,
            align: 'center'
          },
          subtextStyle: {
            align: 'center'
          },
          sublink: 'https://worldcoffeeresearch.org/work/sensory-lexicon/'
        },
        series: {
          type: 'sunburst',
          highlightPolicy: 'ancestor',
          data: [],
          radius: [0, '50%'],
          sort: null,
          levels: [{}, {
            r0: '15%',
            r: '60%',
            itemStyle: {
              borderWidth: 2,
              fontSize: '12px'
            },
            label: {
              position: 'outside',
              padding: -20,
              silent: false
            }
          }]
        },
        color: ['#975e6d', '#f99e1c', '#ef5a78', '#f7f1bd', '#3e0317', '#e62969', '#6569b0', '#ef2d36', '#b53b54', '#a5446f', '#f2684b', '#e73451', '#e65656', '#f89a1c', '#aeb92c', '#4eb849', '#f68a5c', '#baa635', '#f26355', '#e2631e', '#fde404', '#7eb138', '#9ea718', '#94a76f', '#d0b24f', '#8eb646', '#faef07', '#c1ba07', '#8f1c53', '#b34039', '#ba9232', '#8b6439', '#a2b029', '#718933', '#3aa255']
      },
      options3: {
        color: ['#28acb5'],
        title: {
          top: 5,
          left: 'center',
          text: '用人单位所在行业分布图',
          textStyle: {
            color: 'white',
            fontWeight: 400,
            fontSize: 14
          }
        },
        tooltip: {},
        angleAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#1593d9'
            }
          },
          axisLabel: {
            color: '#fff',
            interval: 0
          }
        },
        radiusAxis: {
          splitLine: {
            lineStyle: {
              color: '#1593d9'
            }
          },
          nameTextStyle: {
            color: '#fff'
          },
          axisTick: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        itemStyle: {
          normal: {
            color: '#2ec7c9'
          }
        },
        polar: {
          center: ['50%', '50%'],
          radius: '70%'

        },
        series: [{
          center: ['50%', '50%'],
          radius: '65%',
          type: 'bar',
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderColor: 'polar'
            },
            emphasis: {
              borderWidth: 0,
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          barMinHeight: '15',
          data: [],
          coordinateSystem: 'polar'
        }]
      },
      options4: {
        angleAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          z: 10
        },
        radiusAxis: {
        },
        polar: {
        },
        series: [{
          type: 'bar',
          data: [1, 2, 3, 4, 3, 5, 1],
          coordinateSystem: 'polar',
          name: 'A',
          stack: 'a'
        }],
        legend: {
          show: true,
          data: ['A', 'B', 'C']
        }
      },
      list: []
    }
  },
  methods: {
    renderChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption(this.options)
      this.auto = new AutoHighLight({
        e: this.chart,
        enlarge: true,
        appendDom: this.$refs.dom,
        enlarged: () => {
          $(this.$refs.text).addClass('la')
        },
        closed: () => {
          $(this.$refs.text).removeClass('la')
        }
      })
    },
    getData() {
      this.$post('/service/business/statistic/statistic/getIndustryRate', {
        beginDate: this.currentTime.start,
        endDate: this.currentTime.end
      }).then(res => {
        let no
        for (let i = 0; i < res.result.length; i++) {
          if (res.result[i].name === '未完善') {
            no = res.result.splice(i, 1)[0]
            break
          }
        }
        res.result.sort((a, b) => {
          return b.cnt - a.cnt
        })
        let arr = res.result.splice(0, 10)
        let num = 0
        let top10num = 0
        res.result.forEach(item => {
          num += item.cnt
        })
        if (no) {
          num += no.cnt
          num += 200
        }
        arr.forEach(item => {
          top10num += item.cnt
        })
        if (arr.length) {
          this.list = arr.slice(0)
          this.list.push({
            name: '其他',
            cnt: num
          }, {
            name: '总计',
            cnt: top10num + num
          })
        } else {
          arr.push({
            name: '暂无数据~',
            cnt: 0
          })
          this.list = []
        }
        this.chart.setOption({
          angleAxis: {
            data: arr.map(item => item.name)
          },
          series: [{
            data: arr.map(item => item.cnt),
            barMinHeight: 40
          }]
        })
      })
    },
    start() {
      clearInterval(this.timer)
      this.getData()
      if (this.currentTime.end === this.$dateFormat(new Date(), 'yyyy-MM-dd')) {
        this.timer = setInterval(() => {
          this.getData()
        }, INTERVAL)
      }
    }
  },
  created() {
    this.start()
    this.$watch('currentTime', () => {
      setTimeout(() => {
        this.start()
      }, 20)
    })
  },
  mounted() {
    this.renderChart()
  }
}
</script>
<style scoped lang="scss">
  @import "../../common/style/variables";
  .industry{
    width: 100%;
    height: 100%;
    position: relative;
    .top{
      width: 150px;
      border: 1px solid #2379b7;
      position: absolute;
      top: 5px;
      right: 10px;
      &.la{
        top: 20px;
        right: 100px;
        width: 300px;
        .item{
          &:first-child{
            font-size: 18px;
          }
          .text,.label{
            font-size: 16px;
          }
        }
      }
      .item{
        padding: 0 10px;
        display: flex;
        .label{
          font-size: 12px;
          color:#ffcd75;
          margin-right: 10px;
          flex: 1;
          @include ellipsis;
        }
        .text{
          font-size: 12px;
          color: #fff;
        }
        &:first-child{
          text-align: center;
          font-size: 14px;
          color: #8cd1f7;
        }
        &:not(:last-child){
          border-bottom: 1px solid #2379b7;
        }
      }
    }
  }
</style>
